import React, { Component } from 'react'

export default class App extends Component {
  state = {
    name: '张三',
    age: 10
  }

  changeValue = (e)=>{
    this.setState({
      // [e.target.name] 取出输入框中配置的 name 属性值，用来决定要修改哪个状态
      [e.target.name]: e.target.value
    })
  }

  render() {
    return (
      <div>
        <h1>{this.state.name} -- {this.state.age}</h1>

        {/* 
           如果有多个输入框都是受控，那么我们可以在外部直接定义一个修改函数
           通过 Input 的 name 属性来做输入框的标记，可以在事件中通过事件对象
           进行区分需要修改的属性。
           **** 使用 name 属性的时候，该属性的值一定要是 X 和 this.state.X 相同 ****
        */}
        <input type="text" name='name' value={this.state.name} onChange={this.changeValue} placeholder='请输入名字' />
        <input type="text" name='age' value={this.state.age} onChange={this.changeValue} placeholder='请输出年龄' />

      </div>
    )
  }
}
